<template>
  <div class="detail-record full-height page-content bg-white content padding-20 scrollbar">
    <device-detail title="设备信息" ref="deviceDetail" />
    <div class="q-mt-md q-mb-md">
        <q-separator class="qa-line"/>
    </div>
    <maintenance-information title="保养信息" isRecord ref="maintenanceInformation"/>
    <div class="q-mt-md q-mb-md">
        <q-separator class="qa-line"/>
    </div>
    <process-progress title="处理进度" ref="processProgress" />
    <div class="dialog-footer text-center margin-t-10">
          <q-btn outline label="返回" color="primary" @click="onBcak" class="qa-btn"/>
    </div>
      <q-inner-loading :showing="isScreenLoading" style="z-index: 99">
        <q-spinner-gears size="50px" color="primary" />
      </q-inner-loading>
  </div>
</template>
<script>
import deviceDetail from '../maintenance-order/common/device-detail'
import processProgress from '../maintenance-order/common/process-progress'
import maintenanceInformation from '../maintenance-order/common/maintenance-information'
import { getMaintenaceOrderById } from 'src/boot/maintenance/maintenance-order'
import { mapGetters, mapMutations } from 'vuex'
import _ from 'lodash'
export default {
  name: 'detail-record',
  components: {
    processProgress,
    deviceDetail,
    maintenanceInformation
  },
  data () {
    return {
      maintenaceOrderData: {},
      isScreenLoading: false
    }
  },
  mounted () {},
  beforeRouteEnter (to, from, next) {
    to.name === 'detailRecord' && next(vm => {
      vm.getMaintenaceOrderById()
    })
  },
  computed: {
    ...mapGetters(['footprint'])
  },
  methods: {
    onBcak () {
      const footprint = this.footprint.filter(v => !v.link.includes('detail-record'))
      this.set_footprint(footprint)
      this.$router.back(
        { path: '/main/maintenance/maintenance-record' })
    },
    // 置空数据
    refresh () {
      this.$refs.deviceDetail.detailData = {}
      this.$refs.processProgress.tableData = []
      this.$refs.maintenanceInformation.refresh()
    },
    // 获取详情列表
    getMaintenaceOrderById () {
      const id = this.$route.query.id
      this.refresh()
      this.isScreenLoading = true
      getMaintenaceOrderById(id).then((result) => {
        this.maintenaceRecordData = _.cloneDeep(result.data)
        // 设备信息
        this.$refs.deviceDetail.detailData = this.maintenaceRecordData.deviceInfor
        // 处理进度
        this.$refs.processProgress.tableData = this.maintenaceRecordData.progresses
        // 保养信息
        this.$refs.maintenanceInformation.initData(this.maintenaceRecordData)
        this.isScreenLoading = false
      }).catch((err) => {
        this.isScreenLoading = false
        console.log(err)
      })
    },
    ...mapMutations({
      'set_footprint': 'SET_FOOTPRINT'
    })
  }
}
</script>
